<template>
	<div class="per-quota">
		<div class="quota-top">
			<img class="quota-title" src="~/img/marketingExtension/quota_top.png" alt="" />
			<div class="quota-search">
				<van-search
					class="search-value"
					v-model="searchValue"
					show-action
					placeholder="请输入企业名称或统一信用代码"
					@search="onSearch"
				>
					<template #action>
						<div @click="onSearch">搜索</div>
					</template>
				</van-search>
			</div>
			<img class="quota-body" src="~/img/marketingExtension/quota_tro.png" alt="" />
			<p class="quota-bo">所测算额度仅供参考，不代表银行实际授信额度，不做任何证明。</p>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'quota',
		/*1. Vue扩展 */
		extends: '', // extends和mixins都扩展逻辑，需要重点放前面
		mixins: [],
		components: {},
		/* 2. Vue数据 */
		props: {},
		model: { prop: '', event: '' }, // model 会使用到 props
		data() {
			return {
				userInfo: {},
				searchValue: '',
				mescroll: null,
				newArr: [],
			};
		},
		computed: {},
		watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
		/* 3. Vue资源 */
		filters: {},
		directives: {},
		/* 4. Vue生命周期 */
		created() {},
		mounted() {},
		destroy() {},
		/* 5. Vue方法 */
		methods: {
			onSearch() {
				this.searchValue = this.searchValue;
				if (!this.searchValue) {
					this.$toast('请输入查询的内容');
					return;
				}
				this.$router.push({
					name: 'quotaDetail',
					query: {
						content: decodeURIComponent(this.searchValue),
					},
				});
			},
		},
	};
</script>
<style scoped lang="scss">
	.per-quota {
		position: relative;
		// width: 375px;
		height: 100vh;
		background: #f3f7fe;
		overflow: hidden;
		.quota-top {
			height: 389px;
			background-image: url('~img/marketingExtension/quota_bac.png');
			background-size: 100% 389px;
			background-repeat: no-repeat;
			.quota-title {
				height: 61px;
				margin: 32px 55px 12px 55px;
			}
			.quota-search {
				height: 45px;
				background: #ffffff;
				border-radius: 6px;
				margin: 0 13px;
				display: flex;
				align-items: center;
				.search-value {
					flex: 1;
					background: #fff;
					border-radius: 6px;
					padding: 2px 0;
					padding-right: 15px;
					/deep/ .van-search__content {
						background: #fff;
					}
					/deep/ .van-search__action {
						border-left: 1px solid #c7c7c7;
						border-radius: 0;
						line-height: 20px;
						padding-left: 15px;
					}
				}
			}
			.quota-body {
				height: 395px;
				margin: 24px 10px 8px 10px;
			}
			.quota-bo {
				font-size: 12px;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: #344270;
				line-height: 24px;
				margin: 0px 10px;
				// border: 1px solid red;
			}
		}
	}
</style>
